<template>
  <div class="codewrap">
    <input type="file"
           ref="readfile"
           @change="finishselect()"
           hidden>
    <div class="header">
      <ElTooltip class="box-item"
                 effect="dark"
                 content="打开文件"
                 placement="top-start">
        <span class="iconfont icon-baocun"
              @click="selectfile()"></span>
      </ElTooltip>
      <ElTooltip class="box-item"
                 effect="dark"
                 content="词法分析"
                 placement="top-start">
        <span class="iconfont icon-bianyi"
              @click="firststep()"></span>
      </ElTooltip>
    </div>
    <div class="main">
      <div class="left active"
           @click="selectfile()"
           v-if="!source.length">选择需要解析的文件</div>
      <div class="left"
           v-else>
        <v-md-editor v-model="source"
                     mode="preview"
                     height="400px"></v-md-editor>
      </div>
      <div class="right">
        <div class="result"
             v-loading='loading'>
          <ul>
            <li>
              <p>App running at:</p>
              <p>- Local: http://localhost:8080/</p>
              <p>- Network: http://10.81.197.140:8080/</p>
              <br>
            </li>
            <li v-for="item in Result"
                :key="item">( {{item.key+' , '+item.value}} )</li>
          </ul>
        </div>
        <div class="errorcontent">
          <h3>----出错了----</h3>
          <ul>
            <li v-for="item in Errorarr"
                :key="item">
              <span>第{{item.line}}行的</span>
              <span>{{item.content}}出错了</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 显示所有文件的对话框 -->
  <!-- <ElDialog v-model="dialogVisible"
            title="选择一个你需要编译的文件"
            width="30%">
    <ul class="allfiles">
      <li v-for="item in allfiles"
          :key="item"
          @click="selectonefile(item)">
        <span class="iconfont icon-wenjianjia"></span>
        <span>{{item}}</span>
      </li>
    </ul>
  </ElDialog> -->
  <!-- <button @click="toback11()">测试xss</button>
  <div ref="xsstest">{{xsstest}}</div>
  <A></A> -->
  <router-view />
</template>

<script>

import { ref } from 'vue'
import { ElMessage } from 'element-plus'

import Lexanalysic from '@/hooks/Lexical analysis'
export default {
  name: 'App',
  setup () {
    // 对文件操作的选项
    const selectoption = [{ value: 0, label: '选择文件' }, { value: 1, label: '词法分析' }]
    // 文件中的代码(源代码)
    const source = ref('')
    // 词法分析结果
    const Result = ref([])
    // 报错
    const Errorarr = ref([])
    // 代码编译中
    const loading = ref(false)
    // inputdom
    const readfile = ref(null)
    // 词法分析
    function firststep () {
      loading.value = true
      const { result, errorarr } = Lexanalysic(source.value)
      Result.value = result
      Errorarr.value = errorarr
      loading.value = false
    }

    function selectfile () {
      readfile.value.click()
    }

    function finishselect () {
      const reader = new FileReader()
      reader.readAsText(readfile.value.files[0], 'UTF-8')
      reader.onload = function (e) {
        // 读取文件内容
        const fileString = e.target.result
        if (fileString === '') {
          ElMessage({ type: 'warning', message: '此文件为空，请重新选择' })
          Result.value = []
        }
        // 接下来可对文件内容进行处理
        source.value = fileString
      }
    }
    return { finishselect, selectfile, readfile, source, selectoption, firststep, Result, loading, Errorarr }
  }
}
</script>

<style lang="less" scoped>
.codewrap {
  width: 70%;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid black;
  & > .header {
    // width: 90px;
    position: absolute;
    margin-left: 20px;
    margin-top: 10px;
    & > .iconfont {
      font-size: 20px;
      font-weight: 800;
      color: gray;
      cursor: pointer;
      &:nth-child(n + 2) {
        margin-left: 15px;
      }
      &:hover {
        color: red;
      }
    }
  }
  & > .main {
    display: flex;
    & > .left {
      margin-top: 50px;
      height: 500px;
      flex: 1;
      margin-left: 20px;
      border: 1px dashed rgba(48, 49, 51, 0.5);
      &.active {
        cursor: pointer;
        font-size: 30px;
        font-weight: 800;
        line-height: 500px;
        text-align: center;
        animation: mov 2s linear infinite;
        &:hover {
          color: red;
        }
      }
    }
    & > .right {
      flex: 1;
      margin-left: 20px;
      height: 500px;
      & > .result {
        li:nth-child(1) {
          color: rosybrown;
        }
        height: 300px;
        width: 89%;
        margin: 10px auto;
        border: 2px dashed blueviolet;
        overflow: auto;
      }
      & > .errorcontent {
        height: 200px;
        width: 89%;
        margin: 20px auto;
        border: 2px dashed red;
        overflow: auto;
      }
    }
  }
}
@keyframes mov {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.allfiles {
  max-height: 300px;
  overflow: auto;
  & > li {
    & > span:last-child {
      margin-left: 20px;
    }
    & ~ li {
      margin-top: 10px;
    }
    font-size: 18px;
    font-weight: 800;
    list-style: none;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      transition: all 0.7s;
      background-color: rgba(82, 82, 82, 0.3);
    }
  }
}

:deep(.v-md-editor.v-md-editor--preview) {
  margin-top: 30px;
  .vuepress-markdown-body pre,
  .vuepress-markdown-body pre[class*='v-md-prism-'] {
    line-height: 1.44;
  }
}
</style>
